<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>评论功能组件 - CommentSection</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #4361ee;
      --primary-light: #4895ef;
      --secondary: #f72585;
      --dark: #1e1e2c;
      --light: #f8f9fa;
      --gray: #6c757d;
      --light-gray: #e9ecef;
      --border: #dee2e6;
      --success: #4cc9f0;
      --warning: #fca311;
      --danger: #e63946;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      --radius: 12px;
      --transition: all 0.3s ease;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      line-height: 1.6;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 2rem;
    }

    .comment-container {
      max-width: 800px;
      width: 100%;
      background: white;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2rem;
    }

    .comment-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .comment-title {
      font-size: 1.5rem;
      font-weight: 600;
    }

    .comment-count {
      background: var(--primary);
      color: white;
      padding: 0.2rem 0.8rem;
      border-radius: 50px;
      font-size: 0.9rem;
    }

    .comment-form {
      display: flex;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
    }

    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .comment-input-container {
      flex: 1;
      position: relative;
    }

    .comment-input {
      width: 100%;
      padding: 0.8rem 1rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 1rem;
      font-family: inherit;
      min-height: 100px;
      resize: vertical;
      transition: var(--transition);
    }

    .comment-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
    }

    .comment-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.8rem;
    }

    .emoji-selector {
      display: flex;
      gap: 0.8rem;
    }

    .emoji-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--light-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
    }

    .emoji-btn:hover {
      background: var(--primary-light);
      color: white;
    }

    .post-comment-btn {
      background: var(--primary);
      color: white;
      border: none;
      padding: 0.6rem 1.5rem;
      border-radius: 50px;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
    }

    .post-comment-btn:hover {
      background: var(--primary-light);
    }

    .comment-list {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .comment-item {
      display: flex;
      gap: 1rem;
    }

    .comment-content {
      flex: 1;
      background: var(--light-gray);
      border-radius: 0 12px 12px 12px;
      padding: 1rem;
      position: relative;
    }

    .comment-author {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .author-name {
      font-weight: 600;
    }

    .comment-time {
      font-size: 0.8rem;
      color: var(--gray);
    }

    .comment-text {
      margin-bottom: 0.8rem;
    }

    .comment-stats {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      font-size: 0.9rem;
      color: var(--gray);
    }

    .like-btn {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      cursor: pointer;
      transition: var(--transition);
    }

    .like-btn:hover {
      color: var(--secondary);
    }

    .like-btn.liked {
      color: var(--secondary);
    }

    .reply-btn {
      display: flex;
      align-items: center;
      gap: 0.3rem;
      cursor: pointer;
      transition: var(--transition);
    }

    .reply-btn:hover {
      color: var(--primary);
    }

    .replies-container {
      margin-top: 1rem;
      margin-left: 2rem;
      padding-left: 1.5rem;
      border-left: 2px solid var(--border);
    }

    .reply-form {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
      margin-bottom: 1.5rem;
    }

    .emoji-panel {
      position: absolute;
      bottom: 60px;
      left: 0;
      background: white;
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 1rem;
      width: 300px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 0.5rem;
      z-index: 100;
    }

    .emoji-panel span {
      font-size: 1.2rem;
      cursor: pointer;
      text-align: center;
      padding: 0.2rem;
      border-radius: 4px;
      transition: var(--transition);
    }

    .emoji-panel span:hover {
      background: var(--light-gray);
      transform: scale(1.2);
    }

    .empty-comments {
      text-align: center;
      padding: 3rem;
      color: var(--gray);
    }

    .empty-comments i {
      font-size: 3rem;
      margin-bottom: 1rem;
      opacity: 0.3;
    }

    .comment-actions-right {
      display: flex;
      gap: 1rem;
    }

    .more-actions {
      position: relative;
    }

    .more-btn {
      cursor: pointer;
      padding: 0.3rem;
      border-radius: 4px;
    }

    .more-btn:hover {
      background: var(--light-gray);
    }

    .action-menu {
      position: absolute;
      top: 100%;
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 0.5rem 0;
      min-width: 150px;
      z-index: 10;
    }

    .action-item {
      padding: 0.5rem 1rem;
      cursor: pointer;
      transition: var(--transition);
      font-size: 0.9rem;
    }

    .action-item:hover {
      background: var(--light-gray);
    }

    .action-item.delete {
      color: var(--danger);
    }

    @media (max-width: 768px) {
      body {
        padding: 1rem;
      }

      .comment-container {
        padding: 1.5rem;
      }

      .comment-form {
        flex-direction: column;
      }

      .user-avatar {
        width: 40px;
        height: 40px;
      }

      .replies-container {
        margin-left: 1rem;
        padding-left: 1rem;
      }

      .emoji-panel {
        width: 100%;
        grid-template-columns: repeat(6, 1fr);
      }
    }

    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.3s;
    }

    .fade-enter-from, .fade-leave-to {
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="comment-container">
    <div class="comment-header">
      <h2 class="comment-title">评论</h2>
      <div class="comment-count">{{ comments.length }} 条评论</div>
    </div>

    <div class="comment-form">
      <div class="user-avatar">
        <img :src="currentUser.avatar" alt="用户头像">
      </div>
      <div class="comment-input-container">
          <textarea
              class="comment-input"
              v-model="newComment"
              placeholder="写下你的评论..."
              @focus="showEmojiPanel = false"
          ></textarea>

        <div class="comment-actions">
          <div class="emoji-selector">
            <div class="emoji-btn" @click="toggleEmojiPanel">
              <i class="far fa-smile"></i>
            </div>
          </div>
          <button class="post-comment-btn" @click="addComment">
            发表评论
          </button>
        </div>

        <div class="emoji-panel" v-if="showEmojiPanel">
          <span v-for="(emoji, index) in emojis" :key="index" @click="addEmoji(emoji)">{{ emoji }}</span>
        </div>
      </div>
    </div>

    <div class="comment-list" v-if="comments.length > 0">
      <div
          class="comment-item"
          v-for="(comment, index) in comments"
          :key="comment.id"
          :class="{'fade-in': comment.isNew}"
      >
        <div class="user-avatar">
          <img :src="comment.user.avatar" :alt="comment.user.name">
        </div>
        <div class="comment-content">
          <div class="comment-author">
            <span class="author-name">{{ comment.user.name }}</span>
            <span class="comment-time">{{ formatTime(comment.time) }}</span>
          </div>
          <div class="comment-text">{{ comment.text }}</div>

          <div class="comment-stats">
            <div
                class="like-btn"
                :class="{'liked': comment.liked}"
                @click="toggleLike(comment)"
            >
              <i class="far fa-thumbs-up"></i>
              <span>{{ comment.likes }} 赞</span>
            </div>
            <div class="reply-btn" @click="toggleReplyForm(comment)">
              <i class="far fa-comment"></i>
              <span>回复</span>
            </div>

            <div class="comment-actions-right">
              <div class="more-actions" v-if="comment.user.id === currentUser.id">
                <div class="more-btn" @click="toggleActionMenu(comment)">
                  <i class="fas fa-ellipsis-h"></i>
                </div>
                <div class="action-menu" v-if="comment.showActionMenu">
                  <div class="action-item" @click="editComment(comment)">编辑</div>
                  <div class="action-item delete" @click="deleteComment(index)">删除</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 回复表单 -->
          <div class="reply-form" v-if="comment.showReplyForm">
            <div class="user-avatar">
              <img :src="currentUser.avatar" alt="用户头像">
            </div>
            <div class="comment-input-container">
                <textarea
                    class="comment-input"
                    v-model="comment.replyText"
                    placeholder="写下你的回复..."
                    style="min-height: 60px;"
                ></textarea>
              <div class="comment-actions">
                <button
                    class="post-comment-btn"
                    style="padding: 0.4rem 1rem;"
                    @click="addReply(comment)"
                >
                  回复
                </button>
              </div>
            </div>
          </div>

          <!-- 回复列表 -->
          <div class="replies-container" v-if="comment.replies && comment.replies.length > 0">
            <div
                class="comment-item"
                v-for="(reply, replyIndex) in comment.replies"
                :key="reply.id"
            >
              <div class="user-avatar">
                <img :src="reply.user.avatar" :alt="reply.user.name">
              </div>
              <div class="comment-content">
                <div class="comment-author">
                  <span class="author-name">{{ reply.user.name }}</span>
                  <span class="comment-time">{{ formatTime(reply.time) }}</span>
                </div>
                <div class="comment-text">{{ reply.text }}</div>

                <div class="comment-stats">
                  <div
                      class="like-btn"
                      :class="{'liked': reply.liked}"
                      @click="toggleLike(reply)"
                  >
                    <i class="far fa-thumbs-up"></i>
                    <span>{{ reply.likes }} 赞</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="empty-comments" v-else>
      <i class="far fa-comment-alt"></i>
      <p>还没有评论，成为第一个评论者吧！</p>
    </div>
  </div>
</div>

<script>
  const { createApp, ref, computed, onMounted } = Vue

  createApp({
    setup() {
      // 当前登录用户
      const currentUser = ref({
        id: 1,
        name: '小明',
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
      });

      // 新评论内容
      const newComment = ref('');

      // 显示表情面板
      const showEmojiPanel = ref(false);

      // 表情列表
      const emojis = ref([
        '😀', '😂', '😍', '👍', '👏', '🙌', '🎉', '❤️',
        '🔥', '💯', '👀', '🤔', '😎', '🙏', '🤩', '🥳',
        '😊', '😘', '🤗', '😇', '🤣', '🥰', '😋', '🤪'
      ]);

      // 评论列表
      const comments = ref([
        {
          id: 1,
          user: {
            id: 2,
            name: '张设计师',
            avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
          },
          text: '这个设计真的很棒！特别是颜色搭配和布局，非常符合现代设计趋势。',
          time: new Date(Date.now() - 15 * 60000), // 15分钟前
          likes: 8,
          liked: false,
          replies: [
            {
              id: 101,
              user: {
                id: 3,
                name: '李开发',
                avatar: 'https://randomuser.me/api/portraits/men/22.jpg'
              },
              text: '我同意！交互体验也非常流畅。',
              time: new Date(Date.now() - 10 * 60000), // 10分钟前
              likes: 2,
              liked: false
            }
          ],
          showReplyForm: false,
          replyText: '',
          showActionMenu: false
        },
        {
          id: 2,
          user: {
            id: 3,
            name: '李开发',
            avatar: 'https://randomuser.me/api/portraits/men/22.jpg'
          },
          text: '实现这个功能用了Vue3的Composition API，大大简化了代码逻辑。',
          time: new Date(Date.now() - 30 * 60000), // 30分钟前
          likes: 12,
          liked: true,
          replies: [],
          showReplyForm: false,
          replyText: '',
          showActionMenu: false
        },
        {
          id: 3,
          user: {
            id: 4,
            name: '王产品经理',
            avatar: 'https://randomuser.me/api/portraits/women/68.jpg'
          },
          text: '从用户角度来说，这个功能解决了他们的痛点，提升了整体体验。',
          time: new Date(Date.now() - 45 * 60000), // 45分钟前
          likes: 5,
          liked: false,
          replies: [
            {
              id: 301,
              user: {
                id: 1,
                name: '小明',
                avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
              },
              text: '谢谢您的反馈，我们会继续优化用户体验！',
              time: new Date(Date.now() - 30 * 60000), // 30分钟前
              likes: 3,
              liked: true
            },
            {
              id: 302,
              user: {
                id: 2,
                name: '张设计师',
                avatar: 'https://randomuser.me/api/portraits/women/44.jpg'
              },
              text: '用户反馈一直是我们改进的重要依据。',
              time: new Date(Date.now() - 25 * 60000), // 25分钟前
              likes: 1,
              liked: false
            }
          ],
          showReplyForm: false,
          replyText: '',
          showActionMenu: false
        }
      ]);

      // 添加表情
      const addEmoji = (emoji) => {
        newComment.value += emoji;
        showEmojiPanel.value = false;
      };

      // 切换表情面板
      const toggleEmojiPanel = () => {
        showEmojiPanel.value = !showEmojiPanel.value;
      };

      // 添加新评论
      const addComment = () => {
        if (!newComment.value.trim()) return;

        const newCommentObj = {
          id: Date.now(),
          user: { ...currentUser.value },
          text: newComment.value,
          time: new Date(),
          likes: 0,
          liked: false,
          replies: [],
          showReplyForm: false,
          replyText: '',
          isNew: true
        };

        comments.value.unshift(newCommentObj);
        newComment.value = '';
        showEmojiPanel.value = false;

        // 移除新评论标记
        setTimeout(() => {
          newCommentObj.isNew = false;
        }, 1000);
      };

      // 添加回复
      const addReply = (comment) => {
        if (!comment.replyText.trim()) return;

        const newReply = {
          id: Date.now(),
          user: { ...currentUser.value },
          text: comment.replyText,
          time: new Date(),
          likes: 0,
          liked: false
        };

        if (!comment.replies) {
          comment.replies = [];
        }

        comment.replies.push(newReply);
        comment.replyText = '';
        comment.showReplyForm = false;
      };

      // 切换点赞状态
      const toggleLike = (item) => {
        item.liked = !item.liked;
        item.likes += item.liked ? 1 : -1;
      };

      // 切换回复表单
      const toggleReplyForm = (comment) => {
        comment.showReplyForm = !comment.showReplyForm;
        // 关闭其他评论的回复表单
        comments.value.forEach(c => {
          if (c.id !== comment.id) {
            c.showReplyForm = false;
          }
        });
      };

      // 切换操作菜单
      const toggleActionMenu = (comment) => {
        comment.showActionMenu = !comment.showActionMenu;
        // 关闭其他评论的操作菜单
        comments.value.forEach(c => {
          if (c.id !== comment.id) {
            c.showActionMenu = false;
          }
        });
      };

      // 删除评论
      const deleteComment = (index) => {
        comments.value.splice(index, 1);
      };

      // 编辑评论
      const editComment = (comment) => {
        comment.showActionMenu = false;
        const newText = prompt('编辑评论:', comment.text);
        if (newText !== null) {
          comment.text = newText;
        }
      };

      // 格式化时间
      const formatTime = (date) => {
        const now = new Date();
        const diff = now - date;

        if (diff < 60000) { // 1分钟内
          return '刚刚';
        } else if (diff < 3600000) { // 1小时内
          return `${Math.floor(diff / 60000)}分钟前`;
        } else if (diff < 86400000) { // 1天内
          return `${Math.floor(diff / 3600000)}小时前`;
        } else if (diff < 604800000) { // 1周内
          return `${Math.floor(diff / 86400000)}天前`;
        } else {
          return date.toLocaleDateString();
        }
      };

      // 点击外部关闭面板
      const handleClickOutside = (event) => {
        // 关闭表情面板
        if (showEmojiPanel.value &&
            !event.target.closest('.emoji-selector') &&
            !event.target.closest('.emoji-panel')) {
          showEmojiPanel.value = false;
        }

        // 关闭操作菜单
        comments.value.forEach(comment => {
          if (comment.showActionMenu &&
              !event.target.closest('.more-actions')) {
            comment.showActionMenu = false;
          }
        });
      };

      onMounted(() => {
        document.addEventListener('click', handleClickOutside);
      });

      return {
        currentUser,
        newComment,
        showEmojiPanel,
        emojis,
        comments,
        addEmoji,
        toggleEmojiPanel,
        addComment,
        addReply,
        toggleLike,
        toggleReplyForm,
        toggleActionMenu,
        deleteComment,
        editComment,
        formatTime
      };
    }
  }).mount('#app');
</script>
</body>
</html>